<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title></title>
</head>
<body>
	<div id="app">
		<div v-show="score >= 90">优秀</div>
		<div v-show="score >= 80 && score < 90">良好</div>
		<div v-show="score >= 60 && score < 80">及格</div>
		<div v-show="score < 60">不及格</div>
		<h2>{{score}}</h2>
		<button @click="upScore">up</button>
		<button @click="downScore">down</button>
	</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				score:67
			},
			methods:{
				upScore(){
					if(this.score>90){
						this.score=100
					}else{
						this.score+=10
					}
				},
				downScore(){
					if(this.score<10){
						this.score=0
					}else{
						this.score-=10
					}
				}
			}
		})
	</script>
</body>
</html>